<template>
    <div class="insrecord">
        <el-tabs v-model="activeName">
            <el-tab-pane name="first">
                <span slot="label" class="fontClass" style="margin:0 20px;font-size: 20px;">在职</span>
                <div style="margin-bottom: 15px;display: flex;">
                    <el-button type="primary" style="margin-right: 15px;">导入</el-button>
                    <!-- <el-button type="primary">导出</el-button> -->
                    <template>
                        <download-excel :data="tableData1" :fields="json_fields" :header="title" name="在职员工薪资信息表.xls">
                            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                            <el-button type="primary">导出</el-button>
                        </download-excel>
                    </template>
                </div>
                <el-table ref="multipleTable" :data="tableDataShow" stripe
                    :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" style="width: 100%">
                    <el-table-column type="selection" width="60">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60" fixed>
                    </el-table-column>
                    <el-table-column label="姓名" width="100" fixed>
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="default">{{ scope.row.name }}</el-button>

                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bumen" label="部门" width="120">
                    </el-table-column>
                    <el-table-column prop="zhiwei" label="岗位" width="120">
                    </el-table-column>
                    <el-table-column prop="tel" label="手机号" width="200">
                    </el-table-column>
                    <el-table-column prop="gonghao" label="工号" width="200">
                    </el-table-column>
                    <el-table-column prop="zhengjian" label="证件号" width="200">
                    </el-table-column>
                    <el-table-column prop="gongzuoxingzhi" label="工作性质" width="120">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">
                    </el-table-column>
                    <el-table-column prop="gudinggongzi" label="固定工资" width="200">
                    </el-table-column>
                    <el-table-column prop="zonggongzi" label="总工资" width="200">
                    </el-table-column>
                    <el-table-column prop="ruzhi" label="入职日期" width="200">
                    </el-table-column>
                    <el-table-column prop="zhuanzheng" label="转正日期" width="200">
                    </el-table-column>
                    <el-table-column prop="tiaozheng" label="调整日期" width="200"></el-table-column>
                    <el-table-column prop="desc" label="备注" width="200"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="default" v-if="scope.row.emptype === '正式'">调整</el-button>
                                <el-button type="text" size="default" v-if="scope.row.emptype === '正式'">档案详情</el-button>
                                <el-button type="text" size="default" v-if="scope.row.emptype === '试用'">定薪</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin-top: 15px;">
                    <el-col :span="24" :style="{ textAlign: 'right' }">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" layout="total, prev, pager, next" :total="10">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-tab-pane>

            <el-tab-pane name="second">
                <span slot="label" class="fontClass" style="margin:0 20px;font-size: 20px;">离职</span>
                <div style="margin-bottom: 15px;display: flex;">
                    <el-button type="primary" style="margin-right: 15px;">导入</el-button>
                    <!-- <el-button type="primary">导出</el-button> -->
                    <template>
                        <download-excel :data="tableData2" :fields="json_fields1" :header="title1" name="离职员工薪资信息表.xls">
                            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                            <el-button type="primary">导出</el-button>
                        </download-excel>
                    </template>
                </div>
                <el-table ref="multipleTable" :data="tableData2" stripe
                    :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" style="width: 100%">
                    <el-table-column type="selection" width="60">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60" fixed>
                    </el-table-column>
                    <el-table-column label="姓名" width="100" fixed>
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="default">{{ scope.row.name }}</el-button>

                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bumen" label="部门" width="120">
                    </el-table-column>
                    <el-table-column prop="zhiwei" label="岗位" width="120">
                    </el-table-column>
                    <el-table-column prop="tel" label="手机号" width="200">
                    </el-table-column>
                    <el-table-column prop="gonghao" label="工号" width="200">
                    </el-table-column>
                    <el-table-column prop="zhengjian" label="证件号" width="200">
                    </el-table-column>
                    <el-table-column prop="gongzuoxingzhi" label="工作性质" width="120">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">
                    </el-table-column>
                    <el-table-column prop="gudinggongzi" label="固定工资" width="200">
                    </el-table-column>
                    <el-table-column prop="zonggongzi" label="总工资" width="200">
                    </el-table-column>
                    <el-table-column prop="ruzhi" label="入职日期" width="200">
                    </el-table-column>
                    <el-table-column prop="zhuanzheng" label="转正日期" width="200">
                    </el-table-column>
                    <el-table-column prop="lizhi" label="离职日期" width="200"></el-table-column>
                    <el-table-column prop="desc" label="备注" width="200"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="default" v-if="scope.row.status === '待离职'">停薪</el-button>
                                <el-button type="text" size="default" v-if="scope.row.status === '待离职'">详情</el-button>
                                <el-button type="text" size="default" v-if="scope.row.status === '已离职'">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin-top: 15px;">
                    <el-col :span="24" :style="{ textAlign: 'right' }">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" layout="total, prev, pager, next" :total="10">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            title: "在职员工薪资信息表",
            json_fields: {
                // 序号: "index",
                姓名: "name",
                部门: "bumen",
                岗位: "zhiwei",
                手机号: "tel",
                工号: "gonghao",
                证件号:"zhengjian",
                在职状态: "emptype",
                工作性质: "gongzuoxingzhi",
                状态: "status",
                固定工资: "gudinggongzi",
                总工资: "zonggongzi",
                入职时间: "ruzhi",
                转正时间: "zhuanzheng",
                调整时间: "tiaozheng",
                备注:"",
                // 状态: "complete",
            },
            title1: "离职员工薪资信息表",
            json_fields1: {
                // 序号: "index",
                姓名: "name",
                部门: "bumen",
                岗位: "zhiwei",
                手机号: "tel",
                工号: "gonghao",
                证件号:"zhengjian",
                在职状态: "emptype",
                工作性质: "gongzuoxingzhi",
                状态: "status",
                固定工资: "gudinggongzi",
                总工资: "zonggongzi",
                入职时间: "ruzhi",
                转正时间: "zhuanzheng",
                离职时间: "tiaozheng",
                备注:"",
                // 状态: "complete",
            },
            activeName: 'first',
            tableData1: [
                {
                    id: 1,
                    name: '莫俏丽',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 13714046148,
                    gonghao: 'GH2022011005',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    tiaozheng: '2022-11',
                    desc:'',
                }, {
                    id: 2,
                    name: '令云心',
                    bumen: '产品部',
                    zhiwei: '项目经理',
                    tel: 19893995896,
                    gonghao: 'GH2022011006',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    tiaozheng: '2022-11',
                }, {
                    id: 3,
                    name: '堂安春',
                    bumen: '人力资源部',
                    zhiwei: '项目经理',
                    tel: 15083709763,
                    gonghao: 'GH2021011007',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    tiaozheng: '2022-11',
                }, {
                    id: 4,
                    name: '笃水瑶',
                    bumen: '设计部',
                    zhiwei: '项目经理',
                    tel: 15053222627,
                    gonghao: 'GH2021011008',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    tiaozheng: '2022-11',
                }, {
                    id: 5,
                    name: '野依云',
                    bumen: '财务部',
                    zhiwei: '项目经理',
                    tel: 13669997085,
                    gonghao: 'GH2021011009',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    tiaozheng: '2022-11',
                }, {
                    id: 6,
                    name: '戈元冬',
                    bumen: '销售部',
                    zhiwei: '项目经理',
                    tel: 15080525797,
                    gonghao: 'GH2020011010',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    tiaozheng: '2022-11',
                }, {
                    id: 7,
                    name: '闽飞昂',
                    bumen: '行政部',
                    zhiwei: '项目经理',
                    tel: 17882152912,
                    gonghao: 'GH2020011011',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    tiaozheng: '2022-11',
                    desc:'',
                }, {
                    id: 8,
                    name: '闾丘易文',
                    bumen: '人力资源部',
                    zhiwei: '项目经理',
                    tel: 15725901968,
                    gonghao: 'GH2019011012',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    tiaozheng: '2022-11',
                    desc:'',
                }, {
                    id: 9,
                    name: '曲嘉祥',
                    bumen: '财务部',
                    zhiwei: '项目经理',
                    tel: 13815204688,
                    gonghao: 'GH2019011013',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    tiaozheng: '2022-11',
                    desc:'',
                }, {
                    id: 10,
                    name: '连昌',
                    bumen: '销售部',
                    zhiwei: '项目经理',
                    tel: 15286179282,
                    gonghao: 'GH2019011014',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    gongzuoxingzhi:'全职',
                    status: '在职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    tiaozheng: '2022-11',
                    desc:'',
                },
            ],
            tableDataShow: [],
            tableData2: [
                {
                    id: 1,
                    name: '莫俏丽',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    tel: 13714046148,
                    gonghao: 'GH2022011005',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '待离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    lizhi: '2023-11',
                    desc:'',
                }, {
                    id: 2,
                    name: '令云心',
                    bumen: '产品部',
                    zhiwei: '项目经理',
                    tel: 19893995896,
                    gonghao: 'GH2022011006',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'实习生',
                    status: '待离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    lizhi: '2023-11',
                }, {
                    id: 3,
                    name: '堂安春',
                    bumen: '人力资源部',
                    zhiwei: '项目经理',
                    tel: 15083709763,
                    gonghao: 'GH2021011007',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'兼职',
                    status: '待离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    lizhi: '2023-11',
                }, {
                    id: 4,
                    name: '笃水瑶',
                    bumen: '设计部',
                    zhiwei: '项目经理',
                    tel: 15053222627,
                    gonghao: 'GH2021011008',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'外包',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    lizhi: '2023-11',
                }, {
                    id: 5,
                    name: '野依云',
                    bumen: '财务部',
                    zhiwei: '项目经理',
                    tel: 13669997085,
                    gonghao: 'GH2021011009',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    lizhi: '2023-11',
                }, {
                    id: 6,
                    name: '戈元冬',
                    bumen: '销售部',
                    zhiwei: '项目经理',
                    tel: 15080525797,
                    gonghao: 'GH2020011010',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'劳务派遣',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    desc:'',
                    lizhi: '2023-11',
                }, {
                    id: 7,
                    name: '闽飞昂',
                    bumen: '行政部',
                    zhiwei: '项目经理',
                    tel: 17882152912,
                    gonghao: 'GH2020011011',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    lizhi: '2023-11',
                    desc:'',
                }, {
                    id: 8,
                    name: '闾丘易文',
                    bumen: '人力资源部',
                    zhiwei: '项目经理',
                    tel: 15725901968,
                    gonghao: 'GH2019011012',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    gongzuoxingzhi:'全职',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    lizhi: '2023-11',
                    desc:'',
                }, {
                    id: 9,
                    name: '曲嘉祥',
                    bumen: '财务部',
                    zhiwei: '项目经理',
                    tel: 13815204688,
                    gonghao: 'GH2019011013',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    gongzuoxingzhi:'全职',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    lizhi: '2023-11',
                    desc:'',
                }, {
                    id: 10,
                    name: '连昌',
                    bumen: '销售部',
                    zhiwei: '项目经理',
                    tel: 15286179282,
                    gonghao: 'GH2019011014',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    gongzuoxingzhi:'全职',
                    status: '已离职',
                    gudinggongzi: '8000.00',
                    zonggongzi: '9000.00',
                    ruzhi: '2022-05',
                    zhuanzheng: '2022-08',
                    lizhi: '2023-11',
                    desc:'',
                },
            ],
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.tableDataShow = this.tableData1;
    },
    methods: {

    }
};
</script>
<style lang='less'>
.insrecord {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #f5f7f9;

    .el-tabs {
        background: #fff;
        padding: 20px;
    }
}
</style>